window.addEventListener('load',function(){
    //配置
    var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        color: "C3C3C3", 	//点颜色
        stroke: "EDEDED", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }

    //调用
    CanvasParticle(config);
    //数据源
    let apiTimeData = [
        {"times":4000, "price":1200 ,"unitPrice":"0.3000"},
        {"times":3000, "price":1500 ,"unitPrice":"0.1500"},
        {"times":2000, "price":1300 ,"unitPrice":"0.2500"},       
    ] 

    //遍历数据进行相关渲染
    apiTimeData.forEach(function(v,i){
        //创建标签 li
        let liDom=document.createElement('li');
        //添加属性
        //判定 如果时第一条数据 加上active 其他不加
        if(i==0){
            //添加属性
            liDom.className='default-li active'; 
        }else{
             liDom.className='default-li' ;
        }      
        // 添加文本
        liDom.innerHTML=v.times+'次';
        //添加节点到指定apiDetails的内容之后
        apiDetails.appendChild(liDom)
    })
    //把第一条数据对应的值放到指定的位置
    timesBox.innerHTML=apiTimeData[0].times;
    priceBox.innerHTML=apiTimeData[0].unitPrice;
    //li点击事件
    // 1.获取元素对象
    let detaiLsLi=getEleAll("#apiDetails .default-li");
    //遍历点击对象
    detaiLsLi.forEach(function(v,i){
        v.addEventListener('click',function(){
            //把所有li标签上的active删除
            detaiLsLi.forEach(function(vv){
                vv.classList.remove('active')
            })
            // 给当前li添加active
            this.classList.add('active');
            // 回填函数
            timesBox.innerHTML=apiTimeData[i].times;
            priceBox.innerHTML=apiTimeData[i].unitPrice;
        })
    })
}) 